<template>
  <!--  todo 没写完-->
  <a-collapse
    class="collaps-comp" :activeKey="defaultActiveKey" :bordered="false">
    <template v-for="(item,index) in collapseData">
      <a-collapse-panel :key="index+''" :header="item.title">
        <a-row class="info-box">
          <a-col :offset="(index+1)%2==0?4:0" :span="10" v-for="(citem,index) in item.children" key="index">
            <a-form-model-item :colon="false" :label="citem.label" :labelCol="citem.labelCol?citem.labelCol:labelCol"
                               :wrapperCol="citem.wrapperCol?citem.wrapperCol:wrapperCol"
                               prop="name">
              <img :src="imageUrl + citem.value" alt="" v-if="citem.label === '设备图片'" style="width: 120px; height: 100px" @click="previewImage(citem.value)" />
              <a-input disabled v-model="citem.value" v-else></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </template>

  </a-collapse>
</template>
<script>
export default {
  data() {
    return {
      collapseData: [],
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19},
      },
    }
  },
  props: {},
  computed: {
    defaultActiveKey() {
      return Array.from({length: this.collapseData.length}, (_, index) => index + '')
    },
    imageUrl() {
      return `http://${window.location.host}/tsl-boot/sys/common/static/`;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$emit('initData')
    })

  },
  methods:{
    previewImage(event) {
      window.open(this.imageUrl + event, '_blank');
    }
  }
}
</script>
<style scoped>
.info-box, .system-info-box {
  padding: 20px 0;
}

.info-box /deep/ .ant-form-item, .system-info-box /deep/ .ant-form-item {
  margin-bottom: 20px;
}

.info-box /deep/ .ant-form-item-label > label {
  color: #172B4D;
}

.collaps-comp /deep/ .ant-collapse-borderless > .ant-collapse-item {
  border: none;
}

.collaps-comp /deep/ .ant-collapse-header {
  background: #F4F5F7;
}

.collaps-comp /deep/ .ant-collapse {
  background: transparent;
}

.collaps-comp /deep/ .ant-input[disabled] {
  background: #ebecf0;
  color: #344563
}

.collaps-comp /deep/ .ant-collapse-content > .ant-collapse-content-box {
  padding: 0
}
</style>